<script setup lang="ts">
import { useRoute } from 'vue-router';
import httpClient from '../utils/HttpClient'
import type { PageQueryEntity } from 'spen-common/src/Query';
import { ElButton, translate } from 'element-plus';
import keyEvnet from '@/utils/keyEventHandel';
import { onMounted, ref } from 'vue';
const router = useRoute()
const words = ref();
const keyEventHandel = new keyEvnet();

async function getWord(query: PageQueryEntity){
    query['type'] =  router.query['id'];
    query['word'] = 'only';
    query.limit = '10'
    query.offset = '1'
    let result = await httpClient.get(`/word/word`,{
        params: query,
    });
    if(result.status == 200){
        console.log(result.data)
        words.value = result.data.data
        return true;
    }
    return false;
}

onMounted(()=>{
    keyEventHandel.addBeginFilter((key: KeyboardEvent)=>{
        console.log(key.key);
        return 0;
    });
    keyEventHandel.addBeginFilter({
        sort: 2,
        hander: (event)=> {
            console.log(2)
            return 0;
        },
    })
    keyEventHandel.addBeginFilter({
        sort: 1,
        hander: (event)=> {
            console.log(1)
            return keyEvnet.CODES.groupAfterClose;
        },
    })

})
</script>
<template>
    <ul id="ul-parent">
        <li v-for="k,i in words" class="word-list">
            <div class="word"> {{k.word}}</div>
            <ul>
                <li v-for="translation in k.translations" class="translation-list">
                    {{translation.type}}. {{ translation.translation }}
                </li>
            </ul>
            <div style="height: 35px;" class="input-dev" contenteditable="true" @keydown="keyEventHandel.onclickAsync"></div>
        </li>
    </ul>
    <el-button @click="getWord({})">加载数据</el-button>
</template>
<style lang="less" scoped>
ul {
    padding:0px 0px ;
}
#ul-parent {
    align-items: end;
    margin-left: 45px;
    margin-right: 45px;
}

li {
    list-style: none;
    
}

.word-list .translation-list {
    display: grid;
    align-content: center;
    justify-content: center;
}


.word-list {
    border-radius: 25px;
}

.word {
    text-align: center;
}

#ul-parent {
    display: grid;
    @media (min-width: 550px) {
        grid-template-columns: repeat(2, 1fr)
    }
    @media (min-width: 1150px) {
        grid-template-columns: repeat(3, 1fr)
    }
    @media (min-width: 1750px) {
        grid-template-columns: repeat(4, 1fr)
    }
}

.input-dev {
    width: calc(100% - 16px );
    height: 45px;
    outline: none;
    border-bottom: 2px  solid rgba(51, 51, 51, 0.753);
    text-align: center;
    line-height: 45px;
    color: green;
    margin-left: 8px;
    border-radius: 6px;
    
}
</style>